import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Guides() {
  usePageTitle('Smart Home Guides');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Guides');
  const categories = ['All Guides', 'Kitchen', 'Laundry', 'Climate', 'Security'];
  const allGuides = [{
    id: '1',
    title: 'Smart Refrigerator Buying Guide',
    image: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80',
    category: 'Kitchen',
    excerpt: 'Everything you need to know about choosing the perfect smart refrigerator for your home and lifestyle.',
    readTime: '12 min read'
  }, {
    id: '2',
    title: 'Washing Machine Technology Comparison',
    image: 'https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Laundry',
    excerpt: 'Front-loader vs top-loader, steam features, and smart capabilities - we break down all the options.',
    readTime: '15 min read'
  }, {
    id: '3',
    title: 'Home Security System Integration Guide',
    image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Security',
    excerpt: 'How to create a comprehensive security system that works seamlessly with your smart home.',
    readTime: '18 min read'
  }, {
    id: '4',
    title: 'Air Purifier Technical Comparison',
    image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Climate',
    excerpt: 'HEPA, activated carbon, UV - understanding filter technologies and which is best for your needs.',
    readTime: '10 min read'
  }, {
    id: '5',
    title: 'Smart Oven Features Explained',
    image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
    category: 'Kitchen',
    excerpt: 'From convection to steam to air frying - navigating the complex world of modern oven features.',
    readTime: '14 min read'
  }, {
    id: '6',
    title: 'Smart Thermostat Installation Guide',
    image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Climate',
    excerpt: 'Step-by-step instructions for replacing your old thermostat with a smart, energy-saving alternative.',
    readTime: '8 min read'
  }, {
    id: '7',
    title: 'Dishwasher Water Efficiency Guide',
    image: 'https://images.unsplash.com/photo-1584269600464-37b1b58a9fe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Kitchen',
    excerpt: 'How modern dishwashers save water while improving cleaning performance compared to hand washing.',
    readTime: '9 min read'
  }, {
    id: '8',
    title: 'Smart Dryer Technology Comparison',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Laundry',
    excerpt: 'Heat pump vs traditional dryers - energy efficiency, performance, and fabric care considerations.',
    readTime: '11 min read'
  }, {
    id: '9',
    title: 'Indoor Air Quality Monitoring Guide',
    image: 'https://images.unsplash.com/photo-1527089731344-6055587d9fe1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Climate',
    excerpt: 'Understanding particulate matter, VOCs, and other pollutants in your home and how to address them.',
    readTime: '13 min read'
  }, {
    id: '10',
    title: 'Smart Door Lock Security Analysis',
    image: 'https://images.unsplash.com/photo-1585909695284-32d2985ac9c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Security',
    excerpt: 'Comparing encryption standards, physical security, and vulnerability assessments of popular smart locks.',
    readTime: '16 min read'
  }];
  // Filter guides by category
  const filteredGuides = activeCategory === 'All Guides' ? allGuides : allGuides.filter(guide => guide.category === activeCategory);
  // Pagination logic
  const guidesPerPage = 6;
  const totalPages = Math.ceil(filteredGuides.length / guidesPerPage);
  const currentGuides = filteredGuides.slice((currentPage - 1) * guidesPerPage, currentPage * guidesPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1543286386-2e659306cd6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-50"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4 text-center">
              Buying Guides
            </h1>
            <p className="text-xl text-white max-w-2xl mx-auto text-center mb-8">
              In-depth analysis and expert advice to help you make informed
              decisions about your home appliance investments.
            </p>
            <div className="max-w-md mx-auto">
              <div className="relative">
                <input type="text" placeholder="Search guides..." className="w-full px-5 py-3 rounded-md focus:outline-none" />
                <button className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-[#d4a373] text-white p-1 rounded">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-5 h-5">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Guides grid */}
      <section className="py-16 bg-[#f8f9fa]">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentGuides.map(guide => <Link key={guide.id} to={`/guides/${guide.id}`} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={guide.image} alt={guide.title} className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center justify-between mb-3">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {guide.category}
                    </span>
                    <span className="text-gray-500 text-xs">
                      {guide.readTime}
                    </span>
                  </div>
                  <h3 className="font-bold text-xl mb-3">{guide.title}</h3>
                  <p className="text-gray-600 mb-4">{guide.excerpt}</p>
                  <span className="text-[#d4a373] font-medium">
                    Read guide →
                  </span>
                </div>
              </Link>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
    </div>;
}